<template>
  <div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="treeSearchText" clearable>
    </el-input>
    <el-tree
      :style="{'height':data[0]?data[0].height+'px':'', 'overflow-y': 'scroll'}"
      :data="data"
      accordion
      :props="defaultProps"
      :highlight-current="highlightCurrent"
      :default-expanded-keys="defaultExpandedKeys"
      :node-key="!key?'data':key"
      :ref="zyRef"
      class="scrollber"
      @check="checkChange"
      :show-checkbox="data[0]?data[0].ifchenck:''"
      @node-click="clickTree"
      @node-collapse="nodeCollapse"
      :check-strictly="strictlyData"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
    >
      <!-- :default-checked-keys="TreeChecked?TreeChecked:[]" -->
      <span class="span-ellipsis1" slot-scope="{ node }">
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "ZycmTree",
  props: {
    zyTreeData: {
      type: Array,
      required: true,
    },
    strictlyData:{
       type: Boolean,
      default: true,
    },
    zyRef:{
      type:String,
      default:"treeCheck",
      /* validator(val){

      } */
    },
    noSelectParentNode:{//单选不能选择父节点
      type:Boolean,
      default:false
    },
  },
  // node-key="data"
  //  defaultProps: {
  //     children: "children",
  //     label: "label",
  //   },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      strictly: false,
      key:'data',
      defaultExpandedKeys:[],
      highlightCurrent:true,
      beforeSingleSelectId:"",
      //  zyVisible1:false,
      treeSearchText:''
    };
  },

  created() {},
  computed: {},
  watch: {
    treeSearchText(val) {
        this.$refs[this.zyRef].filter(val);
    },
    // strictlyData(val){
    //   this.strictly=val
    // },
    zyTreeData(val) {
      for (const key in val[0]) {
        if (val[0][key] instanceof Array) {
         this.defaultProps.children=key
        }
      }
      // this.strictly = val[0] ? val[0].strictly : false;

      this.key = val[0] ? val[0].key : 'data';
      //商户登录时屏蔽第一个节点
      if(window.sessionStorage.getItem("uGroupId") != this.GlobalVar.usign){
        if(val.length === 1 && val[0].data===0){
          this.data = val[0].children;
          this.data[0].ifchenck= val[0].ifchenck;
          this.data[0].strictly=val[0].strictly;
        }else{
          this.data = val;
        }
      }else{
        this.data = val;
      }
      for (const key in this.data) {
        this.defaultExpandedKeys=[];
        this.defaultExpandedKeys.push(this.data[key].data);
      }
      this.highlightCurrent=this.data[0]?!this.data[0].ifchenck:true;
    },
  },
  methods: {
    checkChange(data, checked, node) {
      this.$emit("zyChenckTree", data, checked, node);
    },
    clickTree(data, checked, node) {
      //处理展开
      if(data.children && data.children.length > 0){
        this.defaultExpandedKeys.push(data.data);
      }

      if(this.data[0] && !this.data[0].ifchenck){//单选时处理
        if(this.beforeSingleSelectId !== "" && data.data === this.beforeSingleSelectId){//第二次选择同一个节点时 节点取消选中
          this.highlightCurrent=!this.highlightCurrent;
        }else{
          this.highlightCurrent=true;
        }
        this.beforeSingleSelectId = data.data;

        if(this.highlightCurrent){//选中
          if(this.noSelectParentNode && (data.data === 0 || data.lastChildren === 0)){//父节点不能选择
            this.highlightCurrent=false;
            this.$message.warning("不能选择存在子终端组的无效终端组");
            this.$emit("zyClickTree", {"data":"","label":""}, checked, node);
          }else{
            this.$emit("zyClickTree", data, checked, node);
          }
        }else{//取消单选
          this.$emit("zyClickTree", {"data":"","label":""}, checked, node);
        }
        return;
      }
      //多选时
      this.$emit("zyClickTree", data, checked, node);
    },
    nodeCollapse(data,node,el){//收缩节点时 清除数据
      //this.defaultExpandedKeys.remove(data.data);
      let index = this.defaultExpandedKeys.indexOf(data.data);
      if (index > -1) {
        this.defaultExpandedKeys.splice(index, 1);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
};
</script>
<style lang="stylus" scoped>
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  // background: #2183d8;
  // color: #fff!important;
}
.el-tree {
  font-size: 14px;
  overflow-y: scroll;
}
.treeDialogbox .el-tree {
  overflow-y: scroll;
}
</style>
